<template>
  <div class="menu_list" @click="clickMenu">
    <div
      :data-menu-key="index"
      :class="['menu_bar', current == index ? 'active' : '']"
      v-for="(menu, index) in list"
      :key="menu.name"
    >
      {{ menu.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineModel,toRefs, onMounted ,defineEmits} from 'vue'
interface Menu  {
  name:string
  [key: keyof any]:any
}
const props = defineProps<{ list: Array<Menu> }>()
const emits = defineEmits(['change'])
const current = defineModel<number>()
// const current = ref(0)
onMounted(() => {})

function clickMenu(e: MouseEvent) {
  const target = e.target as HTMLElement
  const key = target.dataset?.menuKey

  if (target.className.includes('menu_bar')) {
    if (key) {
      current.value = ~~key
      emits('change', { current: current.value, menu: props.list[current.value] })
    }
  }
}
</script>

<style lang="scss"></style>
